<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>个人注册</title>
	<link rel="shortcut icon" href="favicon.ico">
	<link rel="stylesheet" href="css/base.css">
	<link rel="stylesheet" href="css/register.css">
	<link rel="stylesheet" href="css/font-awesome.min.css">
</head>
<body>
	<div class="registerHead">
		<div class="w">
			<img src="img/logo.jpg">
			<h2 class="welcome">欢迎注册</h2>
			<p class="goLogin fr">已有账号?<a href="login.html">请登录></a></p>
		</div>
	</div>
	<div class="container w">
		<div class="registerBox">
			<ul class="process" id="stepName">
				<li>
					<div class="circle circle1" id="circleGreen">1</div>
					<span  id="step1Finish">验证手机号</span>
				</li>
				<li>
					<div class="circle circle2">2</div>
					<span class="distance">填写账号信息</span>
				</li>
				<li>
					<div class="circle circle3">3</div>
					<span>注册成功</span>
				</li>
				<div class="actived" id="stepUnderline"></div>
			</ul>

				<!--第一步：输入手机号表单-->
				<form action="" class="phoneNumberForm" id="form1">
					<i class="icon-mobile-phone phoneIco"></i>
					<input type="text" placeholder="建议使用常用手机号" class="inputPhoneNumber">
					<div>
						<span class="phoneCode">手机验证码</span>
						<input type="text" class="inputCode" placeholder="输入验证码">
						<button class="getCode">获取验证码</button>
					</div>
					<div class="agreement">
						<input type="checkbox" checked="checked">我已阅读并同意<a href="javascript:;">《MyWay网用户注册协议》</a>
					</div>
					<button type="button" class="nextRegister" id="nextStep">下一步</button>
				</form>
				<!--第二步：填写账号密码表单-->
				<form action="" class="accountInputForm" id="form2">
					<span class="userName">用&nbsp;户&nbsp;名</span>
					<input type="text" placeholder="您的账户名和登录名" class="accountName">
					<span class="setPassword">设置密码</span>
					<input type="password" placeholder="建议使用两种或两种以上字符组合">
					<span class="ensurePassword">确认密码</span>
					<input type="password" placeholder="请再次输入密码">
					<button type="button" class="soonRegister" id="goSuccess">立即注册</button>
				</form>
				<!--第三步：注册成功-->
				<div class="succesRegister" id="successStyle">
					<i class=" icon-time"></i>
					<h2>恭喜您<span>玉笙踏浪行</span></h2>
					<p>您已成功注册为MyWay用户，祝您购物愉快~</p>
					<a href="index.html"><button type="button" class="goShop">去购物</button></a>
				</div>
			</div>
	</div>

	<!--底部信息栏开始-->
	<div class="footer">
		<div class="slogen fl">
			<span class="item slogen2">
				<img src="img/slogen2.png">
			</span>
			<span class="item">
				<img src="img/slogen3.png">
			</span>
			<span class="item slogen1">
				<img src="img/slogen1.png">
			</span>
			<span class="item slogen4">
				<img src="img/slogen4.png">
			</span>
		</div>
		<div class="w">
			<div class="helpLink">
				<dl>
					<dt>- 新手帮助 -</dt>
					<dd><a href="#">常见问题</a></dd>
					<dd><a href="#">自助服务</a></dd>
					<dd><a href="#">联系客服</a></dd>
					<dd><a href="#">意见反馈</a></dd>
				</dl>
				<dl>
					<dt>- 权益保障 -</dt>
					<dd>全国包邮</dd>
					<dd>7天无理由退货</dd>
					<dd>退货运费补贴</dd>
					<dd>限时发货</dd>
				</dl>
				<dl>
					<dt>- 支付方式 -</dt>
					<dd>微信支付</dd>
					<dd>支付宝</dd>
					<dd>白付美支付</dd>
				</dl>
				<dl>
					<dt>- 移动客户端下载 -</dt>
					<div class="downcode">
						<ul>
							<li class="down2">MyWay<img src="img/QRcode.png"></li>
							<li>秀Style<img src="img/QRcode.png"></li>
							<li>uni引力<img src="img/QRcode.png"></li>
						</ul>
					</div>
				</dl>
			</div>
			<div class="map fr">
				<b>MyWay自营覆盖区县</b>
				<p>MyWay已向全国2357个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。</p>	
				<p class="detail"><a href="#">查看详情 ></a></p>
			</div>
		</div>
		<div class="w">
			<div class="infowords">
				<ul>
					<li><a href="#">美丽说</a><span>|</span></li>
					<li><a href="#">淘粉吧</a><span>|</span></li>
					<li><a href="#">QQ钱包</a><span>|</span></li>
					<li><a href="#">时尚品牌网</a><span>|</span></li>
					<li><a href="#">我走我的路</a><span>|</span></li>
					<li><a href="#">装修</a></li>
				</ul>
			</div>
			<div class="copyright">
				<ul>
					<li><a href="#">关于我们</a></li>
					<li><a href="#">招聘信息</a></li>
					<li><a href="#">联系我们</a></li>
					<li><a href="#">商家入驻</a></li>
					<li><a href="#">商家后台</a></li>
					<li><a href="#">MyWay商学院</a></li>
					<li><a href="#">商家社区</a></li>
					<li><a href="#">规则中心</a></li>
					<li><a href="#">有害信息举报</a></li>
					<li class="copyname">&copy; MyWay.com 汉中陕理工网络有限公司</li>
				</ul>
				<br/>
				<ul class="infoBottom fl">
					<li>营业执照：913301065526808764<span>|</span></li>
					<li>网络文化经营许可证：汉网文（2016）0349-219号<span>|</span></li>
					<li>增值电信业务经营许可证：陕B2-20110349<span>|</span></li>
					<li>安全责任书<span>|</span></li>
					<li>陕公网安备 33010602002329号</li>
				</ul>
			</div>
		</div>
	</div>
	<!--底部信息栏结束-->
	<script type="text/javascript">
		var stepUnderline = document.getElementById("stepUnderline");//激活状态下划线
		var form1 = document.getElementById("form1");//手机号表单
		var form2 = document.getElementById("form2");//账号密码表单；
		var step1Finish = document.getElementById("step1Finish");//
		var circleGreen = document.getElementById("circleGreen");//圆圈序号
		var stepName =  document.getElementById("stepName");//获取步骤
		var successStyle =  document.getElementById("successStyle");
		document.getElementById("nextStep").onclick = function(){
		 	stepUnderline.style.marginLeft = "160px";
		 	form1.style.display = "none";
		 	form2.style.display = "block";
		 	step1Finish.style.color = "green";
		 	circleGreen.style.color = "green";
		 	circleGreen.style.border = "1px solid green";
		 }
		document.getElementById("goSuccess").onclick = function(){
		 	stepName.style.display = "none";
		 	form2.style.display = "none";
		 	successStyle.style.display = "block";
		}

	</script>
</body>
</html>